<template>
  <div class="app-container">
    <div class="contract-search">
      <el-input clearable placeholder="请输入合同名称" v-model="keyword" @change="onSearchInput" style="width: 360px">
        <el-button slot="append" icon="el-icon-search" @click="searchAction"></el-button>
      </el-input>
    </div>

    <el-table
      v-loading="listLoading"
      :data="contractList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="合同ID" width="200">
        <template slot-scope="scope">
          {{ scope.row.FlowId }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="合同类型" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.FlowType || '未分类' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同名称">
        <template slot-scope="scope">
          {{ scope.row.FlowName }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="企业ID" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.OrganizationId }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="签署人" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ApproverName }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="签署状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row)" size="small">{{ FLOW_CALLBACK_STATUS[scope.row.FlowCallbackStatus] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_time" label="发起时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ moment(scope.row.CreateOn * 1000).format('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="end_time" label="截止时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ moment(scope.row.DeadLine * 1000).format('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="260">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.FlowCallbackStatus === FLOW_CALLBACK_STATUS_KEY.PENDING"
            type="text"
            size="small"
            @click="onSignClick(scope.row)"
            >查看签署链接</el-button
          >
          <el-button type="text" size="small" @click="onDownload(scope.row)">下载</el-button>
          <el-button v-if="scope.row.FlowStatus === 'PART'" type="text" size="small" @click="cancelFlow(scope.row)"
            >撤销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination> -->

  



     <el-dialog
      title="签署链接"
      :visible.sync="dialogVisibleSign"
      >

      <div style="text-align: center">
        <h2>请使用微信扫描下方二维码</h2>
        <div>
          <img :width="200" :height="200" :src="schemeQrCodeImg"/>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSign = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleSign = false">确 定</el-button>
      </span>
    </el-dialog>

  
  </div>
</template>

<script>
import {
  getContractList,
  createSchemaUrl,
  downloadContract
} from '@/api/contract';
import { FLOW_CALLBACK_STATUS,FLOW_CALLBACK_STATUS_KEY } from '@/consts/status';
import qrcode from 'qrcode';
import moment from 'moment';

export default {

  data() {
    return {
      moment,
      contractList: [],
      listLoading: false,
      dialogVisibleFile: false,
      dialogVisibleSign: false,
      fileList: [],
      uploadList: [],
      templateList: [],
      templateId: {},

      keyword: '',
      currentPage: 1,
      pageSize: 2,
      FLOW_CALLBACK_STATUS,
      FLOW_CALLBACK_STATUS_KEY,
      // 设置合同类型
      flowTypes: [
        {
          value: '分销合同',
          label: '分销合同',
        },
        {
          value: '承诺/授权',
          label: '承诺/授权',
        },
        {
          value: '服务/合作',
          label: '服务/合作',
        },
        {
          value: '租赁',
          label: '租赁',
        },
        {
          value: '采购/销售',
          label: '采购/销售',
        },
        {
          value: '人事/劳动',
          label: '人事/劳动',
        },
        {
          value: '其他',
          label: '其他',
        },
      ],
      currentFlowType: '',
      currentRow: {},
      dialogVisibleFlowType: false,
      deadLine: moment().unix(),
      searchText: '',
      schemeQrCodeImg: ''
    };
  },
  created() {
    this.fetchContractList();
  },
  methods: {
    onSearchInput(value) {
      this.searchText = value;
    },
    searchAction() {
      this.fetchContractList({flowName: this.searchText})
    },
    onDownload(row) {
       downloadContract({flowId: row.FlowId}).then(res=>{
          if(res?.code === 20000 && res?.data?.FileUrls?.length){
            window.open( res.data.FileUrls[0].Url)
          }
       })
    },
    getSignName(row) {
      const flowInfos = row.FlowApproverInfos || [];
      const signersInfos = flowInfos.filter(item => item.ApproveType === 'PERSON');

      const signs = [];

      signersInfos.forEach(item => {
        signs.push(item.ApproveName);
      });
      return signs.join(',');
    },
 
    getTagType(row) {
      const flowStatus = row.FlowCallbackStatus;
      switch (flowStatus) {
        case FLOW_CALLBACK_STATUS_KEY.PENDING:
          return 'info';
        case FLOW_CALLBACK_STATUS_KEY.PART:
          return '';
        case FLOW_CALLBACK_STATUS_KEY.ACCEPT:
          return 'success';
        case FLOW_CALLBACK_STATUS_KEY.REJECT:
          return 'warning';
        case FLOW_CALLBACK_STATUS_KEY.DEADLINE:
          return 'danger';
        default:
          return 'warning';
      }
    },
    async onSignClick(row) {
      this.currentRow = row;
      createSchemaUrl({ flowId:row.FlowId }).then((res) => {
        qrcode.toDataURL(res.data.SchemeUrl, (err, url) => {
          this.schemeQrCodeImg = url;
          this.dialogVisibleSign = true;
        })
      });
    },
    async onSign() {
      this.dialogVisibleSign = false;
    },
    onDialogClose() {
      this.dialogVisibleFile = false;
    },
    fetchContractList(params) {
      this.listLoading =true
      getContractList(params).then(res => {
        this.contractList = res.data?.contracts || [];
        this.listLoading =false
      });
    },

    onCloseSignDialog() {
      this.dialogVisibleSign = false;
    },


  },
};
</script>

<style lang="scss">
.contract-search {
  text-align: right;
  padding-bottom: 20px;

}

.el-upload {
  width: 100%;
}

.el-upload-dragger {
  width: 100%;
}
</style>
